<template>
  <div class="Statistical_box">
    <div id="flow"></div>
    <div class="timeDelayOne_box">
      <p>
        TCP-12时延
        <img src="../../assets/image/group21.png" alt="" />
      </p>
      <div class="timeDelayOne">
        <div class="numerical">
          <span class="value">{{ delaymean }}</span>
          <span>ms</span>
        </div>
        <div id="timeDelayOne"></div>
      </div>
    </div>
    <div class="timeDelayOne_box">
      <p>
        TCP-23时延
        <img src="../../assets/image/group21.png" alt="" />
      </p>
      <div class="timeDelayOne">
        <div class="numerical">
          <span class="value">{{ secondarymean }}</span>
          <span>ms</span>
        </div>
        <div id="timeDelayTwo"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { baseURL } from '../../utils/ipConfig'
export default {
  props: ["touchTest","situationtitle"],
  data() {
    return {
      cumulative: [],
      upstream: [],
      downriver: [],
      hours: [],
      delay: [],
      secondary: [],
      delaymean: 0,
      secondarymean: 0,
      areaCode: "0851",
    };
  },
  watch: {
    touchTest() {
      this.getDataLists();
    },
  },
  mounted() {
    this.getDataLists();
  },
  methods: {
    // 进入页面表格加载
    getDataLists() {
      let _this = this;
      if (_this.situationtitle =="全网" ) {
        let params = new URLSearchParams();
        params.append("cityCode", _this.areaCode);
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`, params)
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              _this.cumulative = [];
              _this.upstream = [];
              _this.downriver = [];
              _this.hours = [];
              _this.delay = [];
              _this.secondary = [];
              resData.data.forEach((item) => {
                //  累计流量
                _this.cumulative.push(item.sum_throughputcount);
                //  上行流量
                _this.upstream.push(item.upward_flowcount);
                //  下行流量
                _this.downriver.push(item.downward_flowcount);
                //  时间
                _this.hours.push(item.hour + "");
                // 12时延
                _this.delay.push(item.tcp_suc_req_time);
                // 23时延
                _this.secondary.push(item.tcp_create_time);
              });
              let time = [];
              time = _this.hours.map(
                (item) => item.substring(item.length - 2) + ":00"
              );
              _this.hours = time;
              const arrayAverage = (arr) =>
                arr.reduce((acc, val) => acc + val, 0) / arr.length;
              // _this.delaymean = Math.round(arrayAverage(_this.delay));
              // _this.secondarymean =Math.round(arrayAverage(_this.secondary));
              _this.delaymean = _this.delay[_this.delay.length - 1];
              _this.secondarymean = _this.secondary[_this.secondary.length -1];
              _this.flow();
              _this.timeDelayOne("timeDelayOne", _this.delay,80);
              _this.timeDelayOne("timeDelayTwo", _this.secondary,20);
            } else {
              _this.delaymean = 0;
              _this.secondarymean = 0;
              _this.cumulative = [];
              _this.upstream = [];
              _this.downriver = [];
              _this.hours = [];
              _this.delay = [];
              _this.secondary = [];
              _this.flow();
              _this.timeDelayOne("timeDelayOne", _this.delay,80);
              _this.timeDelayOne("timeDelayTwo", _this.secondary,20);
              
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      }else {
        let params = new URLSearchParams();
        params.append("cityCode", _this.areaCode);
        params.append("dataType", _this.situationtitle);
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`, params)
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              _this.cumulative = [];
              _this.upstream = [];
              _this.downriver = [];
              _this.hours = [];
              _this.delay = [];
              _this.secondary = [];
              resData.data.forEach((item) => {
                //  累计流量
                _this.cumulative.push(item.sum_throughputcount);
                //  上行流量
                _this.upstream.push(item.upward_flowcount);
                //  下行流量
                _this.downriver.push(item.downward_flowcount);
                //  时间
                _this.hours.push(item.hour + "");
                // 12时延
                _this.delay.push(item.tcp_suc_req_time);
                // 23时延
                _this.secondary.push(item.tcp_create_time);
              });
              let time = [];
              time = _this.hours.map(
                (item) => item.substring(item.length - 2) + ":00"
              );
              _this.hours = time;
              const arrayAverage = (arr) =>
                arr.reduce((acc, val) => acc + val, 0) / arr.length;
              // _this.delaymean = Math.round(arrayAverage(_this.delay));
              // _this.secondarymean =Math.round(arrayAverage(_this.secondary));
              _this.delaymean = _this.delay[_this.delay.length - 1];
              _this.secondarymean = _this.secondary[_this.secondary.length -1];
              _this.flow();
              _this.timeDelayOne("timeDelayOne", _this.delay,80);
              _this.timeDelayOne("timeDelayTwo", _this.secondary,20);
            } else {
              _this.delaymean = 0;
              _this.secondarymean = 0;
              _this.cumulative = [];
              _this.upstream = [];
              _this.downriver = [];
              _this.hours = [];
              _this.delay = [];
              _this.secondary = [];
              _this.flow();
              _this.timeDelayOne("timeDelayOne", _this.delay,80);
              _this.timeDelayOne("timeDelayTwo", _this.secondary,20);
              
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      }
        
      
    },
    flow() {
      let myChart = this.$echarts.init(document.getElementById("flow"));
      myChart.setOption({
        tooltip: {
          trigger: "axis",
        },
        color: ["#4EB95E", "#F5A91C", "#FFF100"],
        legend: {
          data: ["累计流量", "上行", "下行"],
          icon: "line",
          show: true,
        },
        grid: {
          top: "27%",
          left: "3%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.hours,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "累计流量",
            type: "line",
            data: this.cumulative,
            symbol: "none",
            smooth: 0.2,
          },
          {
            name: "上行",
            type: "line",
            data: this.upstream,
            symbol: "none",
            smooth: 0.2,
          },
          {
            name: "下行",
            type: "line",
            data: this.downriver,
            symbol: "none",
            smooth: 0.2,
          },
        ],
      });
    },
    timeDelayOne(id, data,min) {
      let myChart = this.$echarts.init(document.getElementById(id));
      myChart.setOption({
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "7%",
          left: "0%",
          right: "5%",
          bottom: "10%",
          containLabel: true,
        },
        color: ["#A8E6FF"],
        xAxis: {
          boundaryGap: false,
          data: this.hours,
        },
        yAxis: {
          type: "value",
          min:min,
          splitLine: { show: false },
        },
        series: [
          {
            type: "line",
            stack: "总量",
            data: data,
            symbol: "none",
            smooth: 0.2,
            areaStyle: {},
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
.Statistical_box {
  width: 22vw;
  height: 40vh;
  display: flex;
  flex-flow: column nowrap;
  background-color: #eef1f9;
}
#flow {
  width: 95%;
  height: 12vh;
  background-color: #eef1f9;
  border: 1px solid #1d62e8;
  border-radius: 5px;
  margin-bottom: 5px;
  margin: auto;
}
.timeDelayOne_box {
  width: 95%;
  height: 10vh;
  background-color: #eef1f9;
  border: 1px solid #1d62e8;
  padding: 0.5vh 0;
  border-radius: 5px;
  margin-bottom: 5px;
  margin: auto;
}
.timeDelayOne_box p {
  width: 90%;
  height: 2.3vh;
  margin: 0 auto;
  padding-left: 10px;
  border-left: 5px solid #2474ff;
}
.timeDelayOne {
  width: 100%;
  height: 7vh;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
}
.numerical {
  width: 4vw;
  height: 7vh;
  background: url("../../assets/image/Shape_copy11.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}
#timeDelayOne,
#timeDelayTwo {
  width: 75%;
  height: 9vh;
}
@media screen and (max-width: 1366px) {
  .Statistical_box {
    width: 22vw;
    height: 40vh;
    display: flex;
    flex-flow: column nowrap;
    background-color: #eef1f9;
  }
  #flow {
    width: 95%;
    height: 12vh;
    background-color: #eef1f9;
    border: 1px solid #1d62e8;
    border-radius: 5px;
    margin-bottom: 5px;
    margin: auto;
  }
  .timeDelayOne_box {
    width: 95%;
    height: 10vh;
    background-color: #eef1f9;
    border: 1px solid #1d62e8;
    padding: 0.5vh 0;
    border-radius: 5px;
    margin-bottom: 5px;
    margin: auto;
  }
  .timeDelayOne_box p {
    width: 90%;
    height: 3vh;
    margin: 0 auto;
    padding-left: 10px;
    border-left: 5px solid #2474ff;
  }
  .timeDelayOne {
    width: 100%;
    height: 7vh;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
  }
  .numerical {
    width: 4vw;
    height: 7vh;
    background: url("../../assets/image/Shape_copy11.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
  }
  #timeDelayOne,
  #timeDelayTwo {
    width: 75%;
    height: 9vh;
  }
}
</style>